<template>
  <div class="v-editor-file g-jc-sb g-pd-l-8">
    <div>
      <span v-if="valueData && valueData.icon">
        <img
          class="g-m-r-4"
          :src="valueData.icon"
          style="height: 16px"
        />
        <span v-if="valueData && valueData.name">{{ valueData.name }}</span>
      </span>
    </div>

    <div
      v-if="selected && !row.readonly && !isModelDisabled"
      class="g-pd-r-4"
    >
      <img
        src="statics/icons/app/iconupload.svg"
        class="g-pointer"
        @click="handleClick"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { PropertyRow, ModelValue } from "../../types";
import { Ref, computed, inject } from "vue";
import { localFile } from "@/localFile/LocalFile";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

/**
 * 选择文件-单选
 */
const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
}>();

const valueData = computed(() => {
  return props.row.value && Array.isArray(props.row.value) && (props.row.value[0] as ModelValue);
});

const handleClick = async () => {
  const res = await localFile.chooseFile();
  if (res.canceled) return;
  else {
    const filePath = res.files[0]?.path;
    if (!filePath) {
      return;
    }
  }
};
</script>
